<template>
  <div>
    <van-nav-bar title="15天护肤计划" left-text="" left-arrow @click="onClickLeft" />

    <div class="skincare">
      <div class="skin-img">
        <img src="../../assets/img/养成2.png" alt="" />
      </div>

      <van-tabs v-model:active="active" sticky color="#39d167">
        <van-tab title="介绍">
          <div class="cult">
            <!-- 难度系数 -->
            <div class="cult-box">
              <div class="cult-left"><span>•</span> 难度系数:</div>
              <div class="cult-right">
                <van-icon
                  name="star"
                  class="star"
                  style="color: #ffa800 !important; z-index: 99999"
                />
                <van-icon
                  name="star"
                  class="star"
                  style="color: #ffa800 !important; z-index: 99999"
                />
              </div>
              <div class="cult-box">
                <div class="cult-left"><span>•</span> 适用人群:</div>
                <div class="cult-right">有轻微皮肤问题和护肤疑问的人群</div>
                <div class="cult-box">
                  <div class="cult-left"><span>•</span> 预期效果:</div>
                  <div class="cult-right">改善皮肤状态</div>
                </div>
              </div>
            </div>

            <div class="images">
              <p style="letter-spacing: 1.1px">
                炎炎烈日中，你的皮肤是不是整日出油、长痘甚至变得越来越黑呢？
              </p>
              <p style="letter-spacing: 1.8px">
                不彻底的清洁和不正确的护肤步骤会让你的皮肤越来越糟。本方案从清洁和防晒两大方面入手，帮助大家走出护肤误区，养成正确的护肤习惯，从而改善你的皮肤状态。
              </p>
              <p style="letter-spacing: 1.1px">
                短短15天不会让大家的皮肤有翻天覆地的变化，但是只要你坚持下去，皮肤状态会变得越来越好的哦！
              </p>
            </div>
            <div class="prompt">
              <p class="prompt-title" style="margin-top: -13px">
                <b style="font-weight: bold; font-size: 20px; margin-left: 12px">特别提示：</b>
              </p>
              <p style="padding-left: 14px; padding-right: 18px; letter-spacing: 2px">
                有痘痘问题的小伙伴还可以同时订阅【21天战痘计划】，如有需要，可以重复订阅【15天护肤计划】。如果你的皮肤状态已经非常严重，建议使用春雨医生APP的免费提问功能咨询一下医生的意见。
              </p>
              <p style="padding-left: 12px; letter-spacing: 1.1px">
                祝大家养成好的护肤习惯，一天一天美下去！
              </p>
            </div>
          </div>
        </van-tab>
                <van-tab title="目录">
                    <div class="day">
                        <div class="day1"><b>共15日</b></div>
                        <div class="day2">
                            <ul>
                                <li>01日</li>
                                <li class="hj" v-if="currentDate" style="color: #000;margin-left: 65px;" @click="Topi">需要分清自己的皮肤类型</li>
                                <li class="hj" v-else  style="color: #000;margin-left: 65px;">需要分清自己的皮肤类型</li>
                            </ul>
                            <ul>
                                <li>02日</li>
                                <li class="hj" style="margin-left: 65px;">选择合适的洗面奶</li>
                            </ul>
                            <ul>
                                <li>03日</li>
                                <li class="hj" style="margin-left: 65px;">学会正确的洗脸步骤</li>
                            </ul>
                            <ul>
                                <li>04日</li>
                                <li class="hj" style="margin-left: 65px;">这样选择护肤类化妆品</li>
                            </ul>
                            <ul>
                                <li>05日</li>
                                <li class="hj" style="margin-left: 65px;">学会选择合适的爽肤水</li>
                            </ul>
                            <ul>
                                <li>06日</li>
                                <li class="hj" style="margin-left: 65px;">精华素需要这样使用</li>
                            </ul>

                            <ul>
                                <li>07日</li>
                                <li class="hj" style="margin-left: 65px;">选择合适的眼部化妆品</li>
                            </ul>
                            <ul>
                                <li>08日</li>
                                <li class="hj" style="margin-left: 65px;">眼部保养要这样做</li>
                            </ul>
                            <ul>
                                <li>09日</li>
                                <li class="hj" style="margin-left: 65px;">睡前一定要卸妆！</li>
                            </ul>
                            <ul>
                                <li>10日</li>
                                <li class="hj" style="margin-left: 65px;">忍住！一整日不挤痘痘，</li>
                            </ul>
                            <ul>
                                <li>11日</li>
                                <li class="hj" style="margin-left: 65px;">可以这样对付痘痘！</li>
                            </ul>
                            <ul>
                                <li>12日</li>
                                <li class="hj" style="margin-left: 65px;">矿泉喷雾要这样用</li>
                            </ul>
                            <ul>
                                <li>13日</li>
                                <li class="hj" style="margin-left: 65px;">选择适合你的面膜</li>
                            </ul>
                            <ul>
                                <li>14日</li>
                                <li class="hj" style="margin-left: 65px;">化妆品要这样保存</li>
                            </ul>
                            <ul>
                                <li>15日</li>
                                <li class="hj" style="margin-left: 65px;">使用彩妆类化妆品需注意这些事情</li>
                            </ul>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>

         <div>
        <div v-for="(item, index) in list" :key="index">
            {{ item.flag }}
        </div>
        <button style="width: 98%;height: 50px;background-color:#39d167;margin-top: 42px;border: none;
        outline: none;color: white;position: absolute;left: 5px;border-bottom: 0px;" @click="addji"
            v-if="flag == true">加入计划</button>
        <div v-else style="width: 95%;height: 100px;background-color: white;position: fixed;bottom: 0;left: 7px;">
            <button style="width: 45%;height: 50px;background-color:#39d167;margin-top: 40px;border: none; bottom: 5px;
        outline: none;color: white;position: absolute;left: 0px;border-bottom: 0px;">查看今天计划</button>
            <button style="width: 45%;height: 50px;background-color:#ffff;margin-top: 40px;border: 1px solid #70de91 ;color: #39d167;
        outline: none;position: absolute;right: 0px;bottom: 5px;" @click="handlequ">取消计划</button>
        </div>
    </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const active = ref(0)
const onClickLeft = () => history.back()
// 获取当天时间
const currentDate = ref(new Date());
console.log(currentDate.value);
const Topi=()=>{
    router.push('/Topi')
}
const flag = ref<any>(false)
const list = ref<any>([])
import axios from 'axios'
const getlist = async () => {
  await axios
    .get('/Todetail/goodVideo')
    .then((res) => {
      console.log(res)
      list.value = res.data.data
      console.log(list.value)
    })
    .catch((err) => {
      console.log(err)
    })
}
getlist()
</script>

<style lang="scss" scoped>
.skincare {
  background: #fff;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .skin-img {
    width: 100%;
    height: 150px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .cult {
    .cult-box {
      width: 100%;
      height: 100px;
    }

    .cult {
        .cult-box {
            width: 100%;
            height: 100px;

        }

        .images {
            width: 95%;
            height: 200px;
            margin-top: 25px;
            margin-left: 10px;

            p {
                line-height: 24px;
            }
        }

        .prompt {
            height: 320px;
            margin-top: 20px;

            .prompt-title {
                color: red;
            }

            p {
                line-height: 27px;
            }
        }

        .cult-left {
            float: left;
            height: 20px;
            width: 30%;
            // background-color: blue;
            text-align: center;
            padding-top: 10px;

            span {
                color: #39d167;
            }
        }

        .cult-right {
            float: left;
            height: 30px;
            width: 70%;

            text-align: left;
            padding-top: 10px;

            .star {
                color: #ffa800;
            }

        }

      p {
        line-height: 24px;
      }
    }

    .prompt {
      height: 320px;
      margin-top: 20px;

      .prompt-title {
        color: red;
      }

      p {
        line-height: 27px;
      }
    }

    .cult-left {
      float: left;
      height: 20px;
      width: 30%;
      // background-color: blue;
      text-align: center;
      padding-top: 10px;

      span {
        color: #39d167;
      }
    }

    .cult-right {
      float: left;
      height: 30px;
      width: 70%;

      text-align: left;
      padding-top: 10px;

      .star {
        color: #ffa800;
      }
    }
  }
}

.cult-btn {
  position: fixed;
  width: 100%;
  height: 90px;
  // text-align: center;
  padding: 10px;
  background-color: #fff;
  border-top: 1px solid #ffff;
  bottom: 0;
  z-index: 99;

    .button {
        width: 100%;
        height: 50px;
        background-color: #39d167 !important;
        text-align: center;
        line-height: 50px;
        color: white;
        font-weight: bold;
        font-size: 20px;
        border: none;
    }
}

.day {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    margin-left: 15px;
    background: #fff;

    .day1 {
        width: 100%;
        height: 30px;
        font-size: 19px;
    }

    .day2 {
        width: 100%;
        height: 850px;
        margin-top: 15px;

        ul {

            height: 50px;
            display: flex;
            justify-items: center;
            border-bottom: 1px solid #e5e5e5;

            li {
                position: absolute;
                line-height: 25px;
                left: 10px;
                color: #a7a7a7;
                margin-top: 10px;
            }

            .hj {
                margin-left: 25px;
            }
        }
    }
}

.cult-btn .button[data-v-e9e16a52] {
    width: 100%;
    height: 50px;
    background-color: #39d167 !important;
    text-align: center;
    line-height: 50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border: none;
  }


.day {
  width: 100%;
  height: 100%;
  margin-top: 10px;
  margin-left: 15px;
  background: #fff;

  .day1 {
    width: 100%;
    height: 30px;
    font-size: 19px;
  }

  .day2 {
    width: 100%;
    height: 850px;
    margin-top: 15px;

    ul {
      height: 50px;
      display: flex;
      justify-items: center;
      border-bottom: 1px solid #e5e5e5;

      li {
        position: absolute;
        line-height: 25px;
        left: 10px;
        color: #a7a7a7;
        margin-top: 10px;
      }

      .hj {
        margin-left: 25px;
      }
    }
  }
}

.cult-btn .button[data-v-e9e16a52] {
  width: 100%;
  height: 50px;

  // background-color: #39d167;
  text-align: center;
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
}

:deep(.van-tabs__line) {
  position: absolute;
  bottom: 15px;
  left: 0;
  z-index: 1;
  background: #39d167;
  border-radius: var(--van-tabs-bottom-bar-height);
}

:deep(.van-icon) {
  color: #000 !important;
}

[data-v-ca42e025] .van-icon {
  color: #ffa800 !important;
}
</style>
